<template>
    <div class="put-create">
        <el-tabs v-model="activeName">
            <el-tab-pane label="推送管理" name="first">
                <div class="box-container">
                <!--左侧手机模拟框-->
                    <div class="container-left">
                        <div class="phone2">
                            <div class="start-page" > 
                                <div class="scale">
                                    <span v-text="form.msgTitle==''?'活动盒子':form.msgTitle">推送标题</span>
                                    <div  v-text="form.msgContent==''?'将创建好的活动推送给你的客户':form.msgContent"></div>
                                </div>   
                            </div>                          
                        </div>
                    </div>

                    <!--右侧内容-->
                    <div class="container-right">
                        <div class="right-content">
                            <div class="form-item-box clearfix">
								<div class="form-item-left require-item">规则名称：</div>
								<div class="form-item-right">
                                    <el-input class="input" v-model="form.activityName" placeholder="请输入规则名称，最多支持10个字 " :maxlength="10"></el-input>
								</div>
							</div>
                            

                            <div class="form-item-box clearfix">
                                <div class="form-item-left require-item">选择活动：</div>
                                <div class="form-item-right">
                                    <el-input placeholder="请输入活动地址：(示例) http://" v-model="form.addActivityOwn" class="float-left item-input" v-if="form.addActivityselect==2"></el-input>
                                    <el-input placeholder="选择活动" @focus="activityDialog = true" readonly="readonly" v-model="form.addActivityList"   class="float-left item-input" v-else></el-input>
                                    <el-select v-model="form.addActivityselect" @change="addActivityChange" placeholder="选择活动" class="float-left item-select">
                                        <el-option label="活动列表" value="1"></el-option>
                                        <el-option label="自由活动" value="2"></el-option>
                                    </el-select>
                                </div>
                            </div>

                            <!-- 选择活动弹出框 -->
                            <el-dialog
                                title="选择活动"
                                :visible.sync="activityDialog"
                                size="small"
                                class="table-small"
                                >
                                
                                <el-table
                                    :data="tableData"
                                    stripe
                                    style="width: 100%">
                                    <el-table-column prop="name" label="活动名称"> </el-table-column>
                                    <!--<el-table-column prop="name" label="类型"> </el-table-column>-->
                                    <el-table-column prop="startTime" label="开始时间 "> </el-table-column>
                                    <el-table-column prop="endTime" label="结束时间 " >  </el-table-column>
                                    <el-table-column prop="address" label="操作 " width="120" >
                                        <template slot-scope="scope">
                                            <el-button @click="selectClick(scope.row)" type="text" size="small">选取</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="activityDialog = false">取 消</el-button>
                                    <el-button type="primary" @click="activityDialog = false">确 定</el-button>
                                </span>
                            </el-dialog>

                            <div class="form-item-box clearfix">
								<div class="form-item-left require-item">选择平台：</div>
								<div class="form-item-right">
                                    <el-checkbox v-model="form.iosCheck" :disabled="!iosPass">
                                        <i class="ios-icon sdkicon" :class="{'active-ios':iosPass}" ></i>
                                    </el-checkbox>
                                    <el-checkbox v-model="form.androidCheck" :disabled="!androidPass">
                                        <i class="android-icon sdkicon" :class="{'active-android':androidPass}" ></i>            
                                    </el-checkbox>
								</div>
							</div>

                            <div class="form-item-box clearfix">
								<div class="form-item-left ">推送通道：</div>
								<div class="form-item-right">
                                    <el-radio class="radio" v-model="form.pushRadio" label="1">极光推送</el-radio>
								</div>
							</div>

                            <div class="form-item-box clearfix">
								<div class="form-item-left require-item">通知标题：</div>
								<div class="form-item-right">
                                    <el-input class="input" v-model="form.msgTitle" placeholder="最多支持20个字 " :maxlength="20"></el-input>
								</div>
							</div>

                            <div class="form-item-box clearfix ">
								<div class="form-item-left require-item">通知内容：</div>
								<div class="form-item-right">
                                    <el-input
                                        type="textarea"
                                        :maxlength="50"
                                        class="textarea-content"
                                        :rows="2"
                                        placeholder="最多支持50个字"
                                        v-model="form.msgContent">
                                    </el-input>
								</div>
							</div>
                            
                            <div class="form-item-box clearfix">
								<div class="form-item-left require-item">推送时间：</div>
								<div class="form-item-right">
                                    <el-radio-group v-model="form.pushDateRadio">
                                        <el-radio label="1">即时</el-radio>
                                        <el-radio label="2" >定时</el-radio>
                                    </el-radio-group>
                                    <el-date-picker
                                        style="margin-left:15px;"
                                        v-model="form.pushDate"
                                        v-show="form.pushDateRadio==2"
                                        type="datetime"
                                         :picker-options="pickerOptions"
                                        placeholder="选择日期时间">
                                    </el-date-picker>
								</div>
							</div>

                            <div class="form-item-box clearfix">
								<div class="form-item-left require-item">离线消息：</div>
								<div class="form-item-right">
                                    <el-radio-group v-model="form.offLineRadio">
                                        <el-radio label="1">否</el-radio>
                                        <el-radio label="2" >是</el-radio>
                                    </el-radio-group>
                                    <div v-show="form.offLineRadio==2" >
                                      发送时处于离线的用户，如在<span class="off-line">
                                      <el-select class="off-line-select" v-model="form.offLineValue" placeholder="请选择">
                                        <el-option 
                                            v-for="item in optionsList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                      </span>恢复在线，仍然进行推送  
                                    </div>
								</div>
							</div>

                            <!-- <div class="form-item-box clearfix">
								<div class="form-item-left require-item">推送用户：</div>
								<div class="form-item-right">
                                    <el-radio-group v-model="form.pushUserRadio">
                                        <el-radio label="1">规则用户</el-radio>
                                        <el-radio label="2">分组用户</el-radio>
                                    </el-radio-group>
                                    <div style="margin-top:10px;">
                                        <el-select v-model="form.pushUserValue" placeholder="请选择">
                                            <el-option 
                                                v-for="item in pushUserClass"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <el-select
                                            v-show="form.pushUserValue==2"
                                            v-model="form.onlyUserArr"
                                            multiple
                                            filterable
                                            allow-create
                                            class="only-user-input"
                                            placeholder="请选择文章标签">
                                                <el-option
                                                v-for="item in onlyValueList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                        </el-select>
                                    </div>
								</div>
							</div> -->

                            <div class="form-item-box sub-btn text-center">
								 <el-button class="btn-bg" type="primary" @click="addPush">保存</el-button>
							</div>

                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>



    </div>
</template>

<script>
	import * as api from './../api/api';
export default {
    data(){
        return {
            activeName: 'first',
            iosPass:true, //ios是否接入成功    
            androidPass:true,   //android是否接入成功
            activityDialog:false,//选择活动弹出框是否显示
            tableData:[],//弹出框数据
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            form:{
                activityName:'',
                iosCheck:true,   //是否选择ios平台
                androidCheck:false, //是否选择android平台
                genreRadio:'1',
                addActivityOwn:'', //自由活动名称
                addActivityList:'', //选择列表活动名称
                addActivityId:'',//选择列表活动id
                addActivityselect:'1', //2-自由活动or 1-列表活动
                pushRadio:'1',  //推送通道
                msgTitle:'', //推送标题
                msgContent:'', //推送内容
                //推送时间
                pushDateRadio: '1',  //推送时间选择1-即时 2-定时
                pushDate:'',   ////推送时间年月日
                // 离线消息
                offLineRadio:'1',  //离线消息
                offLineValue:'',  //选择离线时间   
                //推送用户
                pushUserRadio:'1',  //推送用户
                pushUserValue:'1',  //推送类型
                onlyUserArr:[],  //特定推送的用户列表
            },
            optionsList:[{
                value: '3',
                label: '3小时内'
                }, {
                value: '4',
                label: '4小时内'
                }, {
                value: '5',
                label: '5小时内'
                }, {
                value: '6',
                label: '6小时内'
            }],
            //特定推送用户
            onlyValueList:[{
                value: '端午节',
                label: '端午节'
                }, {
                value: '抽奖',
                label: '抽奖'
                }, {
                value: '抢单',
                label: '抢单'
            }],
            pushUserClass:[{
                value: '1',
                label: '所有用户'
                }, {
                value: '2',
                label: '特定用户'
            }]
        }
    },
    watch:{
        'form.pushUserRadio'(a,b){
            if(a==1){
                this.pushUserClass=[ { value: '1', label: '所有用户' }, { value: '2', label: '特定用户' } ];
                this.form.pushUserValue='1';
            }else{
                this.pushUserClass=[ { value: '1', label: '所有用户' } ];
                this.form.pushUserValue='1';
            }
        }
    },
    mounted(){
        this.getPutActivityList();
    },
    methods: {
        //表单验证
        trgReg(){
            let reg=/^(https|http|ftp|rtsp|mms):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/;
            if(this.form.activityName==''){
                this.$message({showClose: true,message: '规则名称不能为空'});	
                return false;
            }else if(this.form.addActivityselect==1&&!this.form.addActivityId){
                this.$message({showClose: true,message: '请选择活动'});
                return false;
            }else if(this.form.addActivityselect==2&&!reg.test(this.form.addActivityOwn)){
                this.$message({showClose: true,message: '请输入正确自由活动链接'});
                return false;
            }else if(!this.form.iosCheck&&!this.form.androidCheck){
                this.$message({showClose: true,message: '请选择平台'});	
                return false;
            }else if(this.form.msgTitle==''){
                this.$message({showClose: true,message: '请输入通知标题'});	
                return false;
            }else if(this.form.msgContent==''){
                this.$message({showClose: true,message: '请输入通知内容'});	
                return false;
            }else if(this.form.pushDateRadio=='2'&&this.form.pushDate==''){
                this.$message({showClose: true,message: '请选择推送时间'});	
                return false;
            }else if(this.form.offLineRadio=='2'&&this.form.offLineValue==''){
                this.$message({showClose: true,message: '请选择离线时间'});
                return false;
            }else{
                return true;
            }
        },
        // 新建推送      
        addPush(){
            let vm = this;
            if(vm.trgReg()){
                if(vm.form.iosCheck && vm.form.androidCheck){
                    var checked = 'all';
                }else if(vm.form.iosCheck){
                    var checked = 'ios';
                }else if(vm.form.androidCheck){
                    var checked = 'android'
                }
                let body={
                    push_rule:vm.form.activityName,  //推送规则名称
                    push_title:vm.form.msgTitle,  //推送标题
                    push_content:vm.form.msgContent,  //推送内容
                    platform:checked,  //平台-ios-android
                    //crontab_time:'',  //定时时间 （没有不传该字段）
                    //off_line:'',  //离线保存时间（秒） （没有不传）
                    //act_id:vm.form.addActivityId,  //活动名称id
                    //act_name:'',  //活动名称
                    act_type:vm.form.addActivityselect,  //活动类型1活动列表2自由活动
                    push_type:vm.form.pushRadio,  //推送通道
                };
                if(vm.form.pushDateRadio=='2'){
                    body.crontab_time = vm.timeDateMinutes(vm.form.pushDate);
                };
                if(vm.form.offLineRadio=='2'){
                    body.off_line = vm.form.offLineValue;
                };
                if(vm.form.addActivityselect=='1'){
                    body.act_id = vm.form.addActivityId;
                    body.act_name = vm.form.addActivityList;
                }else if(vm.form.addActivityselect=='2'){
                    body.act_id = '';
                    body.act_name = vm.form.addActivityOwn;
                };
                api.addPush(body).then(res=>{
                    vm.pageLoading=false;   
                    if(res.data.code==200){
                        vm.$message({showClose: true,message: '发送推送消息成功！'});
                        vm.form={
                            activityName:'',
                            iosCheck:true,   //是否选择ios平台
                            androidCheck:false, //是否选择android平台
                            genreRadio:'1',
                            addActivityOwn:'', //自由活动名称
                            addActivityList:'', //选择列表活动名称
                            addActivityId:'',//选择列表活动id
                            addActivityselect:'1', //2-自由活动or 1-列表活动
                            pushRadio:'1',  //推送通道
                            msgTitle:'', //推送标题
                            msgContent:'', //推送内容
                            //推送时间
                            pushDateRadio: '1',  //推送时间选择1-即时 2-定时
                            pushDate:'',   ////推送时间年月日
                            // 离线消息
                            offLineRadio:'1',  //离线消息
                            offLineValue:'',  //选择离线时间   
                            //推送用户
                            pushUserRadio:'1',  //推送用户
                            pushUserValue:'1',  //推送类型
                            onlyUserArr:[],  //特定推送的用户列表
                        }
                    }
                }).catch(err=>{
                    vm.pageLoading=false;
                });
            }            
            
        },
        // 投放活动（自由活动or列表活动）
        addActivityChange(a){
            
        },
        //获得活动列表
        getPutActivityList(){
            let vm = this;
            let body={

            };
            api.getPutActivityList(body).then(res=>{
                vm.tableData=res.data.data.base;
            });
        },
        //选取活动
        selectClick(data){
            this.activityDialog = false;
            // console.log(data.name)
            this.form.addActivityList = data.name;
            this.form.addActivityId = data.id;
        },
    },
    computed: {
    },
    
    
}
</script>
<style lang="less">
    .put-create{
        .pick-date-box .el-input__inner{
            height: 34px;
            box-sizing: border-box;
            border-radius: 0;
            background-color: #f4f8fb;
            color: #888;
            border: 1px solid #efefef;
            box-shadow: none;
            font-size: 12px;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            box-sizing: border-box;
        }
        .el-select .el-input {
            width: 140px;
        }
        .only-user-input{
            .el-input{
                width: 270px;
            }
        }
        .el-textarea__inner{
            resize: none;
        }
        .off-line-select{
            .el-input{
                width:98px;
            }
        }
        .el-input.is-disabled .el-input__inner{
            cursor: pointer;
        }
    }
</style>
<style lang="less" scoped>
.put-create{
    height:100%;
    width:100%;
    overflow-y:auto;
    background:#fff;
    padding:40px;
    .box-container{
        width: 100%;
        height: auto;
        min-height: 600px;
        position: relative;
        .container-left{
            width: 360px;
            height: auto;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            padding-left: 50px;
            padding-top: 30px;
            .phone2{
                width: 268px;
                height: 501px;
                background: url(../assets/img/phone_04.png) no-repeat;
                background-size: 100%;
                position: relative;  
                .scale{
                    padding-top:132px;
                    padding-left:35px;
                    box-sizing: border-box;
                    z-index:10;
                    color:#fff;
                    span{
                        font-size:15px;
                    }
                    div{
                        font-weight: 300;
                        font-size:12px;
                    }
                }
            }
            img{
                width: 100%;
                height: 100%;
            }
            .start-page{
                width: 256px;
                height: 422px;
                overflow: hidden;
                position: absolute;
                top: 32px;
                left: 0;
                right: 0;
                margin: auto;
                background:url('./../assets/img/push.png') no-repeat;
                background-size:100% 100%;
                
            }
        }
        .container-right{
            width: 100%;
            height: auto;
            padding-left: 360px;
            .right-content{
                min-height: 600px;
                border-left: 1px solid #efefef;
                padding-left: 20px;
                .sub-btn{
                    margin:20px 0;
                    .btn-bg{
                        width:150px;
                    }
                }
                .form-item-box{
                    margin-bottom: 15px;
                    font-size: 12px;
                    
                    .form-item-left{
                        float: left;
                        line-height: 34px;
                        color:#666666;
                        width:88px;
                        box-sizing: border-box;
                    }
                    .form-item-right{
                        float: left;
                        width: 430px;
                        min-height: 34px;
                        line-height:34px;
                        .to-position{
                            color:#ec5463;
                        }
                        .sdkicon {
                            margin-bottom: -3px;
                            display:inline-block;
                            background-size: 128px 64px;
                        }
                        .separate-box{ 
                            display:inline-block;
                            padding: 6px 12px;
                        }
                        .ios-icon{
                            width: 38px;
                            height: 16px;
                            background-position: -1px -35px;   
                            background-image: url(../assets/img/sdkicon2.png);        
                        }
                        .active-ios{
                            background-position:  -202px -1px;   
                            background-image: url(../assets/img/sdkicon2.png);  
                        }
                        .android-icon{
                            width: 73px;
                            height: 16px;
                            background-position: -1px -18px; 
                            background-size: 128px 64px;
                            background-image: url(../assets/img/sdkicon2.png); 
                        }
                        .active-android{
                            background-position: -1px -1px; 
                            background-image: url(../assets/img/sdkicon2.png); 
                        }
                        .item-input{
                            width:290px;
                        }
                        .textarea-content{
                            height:60px;
                        }
                        .off-line{
                            margin:0 10px;
                            
                        }
                    }
                    .form-item-right .input{
                        background-color: #f4f8fb;
                        color: #888;
                        box-shadow: none;
                        font-size: 12px;
                        width: 100%;
                        height: 34px;
                        box-sizing: border-box;
                    }
                    
                    .more-site-list{
                        float: left;
                        width: 414px;
                        max-height:105px !important;
                        max-height:65px !important;
                        overflow-y:auto;
                        .radio{
                            width:170px;
                            margin-top:10px;
                        }
                        &::-webkit-scrollbar {/*滚动条整体样式*/
                                width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
                                height: 1px;
                        }
                        &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                                border-radius: 10px;
                                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                                background: #293E51;
                        }
                        &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                                border-radius: 10px;
                                background: #EDEDED;
                        }
                    }

                }
                .clearfix:after{
                    content:'';
                    display: block;
                    height: 0;
                    clear:both;
                }
                .activity-list{
                    width:600px;
                    height:auto;
                    border:1px solid #efefef;
                    padding-left:20px;
                    position:relative;
                    .add-btn{
                        position:absolute;
                        top:4px;
                        right:10px;
                        z-index:5;
                    }
                    .add-banner{
                        height: 100px;
                        .add-banner-btn{
                            width: 60px;
                            height: 60px;
                            line-height: 52px;
                            font-size: 30px;
                            font-weight: 100;
                            color: #888;
                            border-color: #efefef;
                            border: 1px solid #efefef;
                            display: inline-block;
                            text-align: center;
                            background-color: #f4f8fb;
                            cursor:pointer;
                        }
                        .fa-times{
                            position: relative;
                            top: -30px;
                            font-size: 14px;
                            color:#888888;
                            cursor: pointer;
                            &:hover{
                                opacity: 0.8;
                            }
                        }
                        img{
                            height: 60px;
                        }
                        p{
                            color: #999999;
                            padding-top: 5px;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .upload-body{
        padding: 15px;   
    }
    .upload-img-list li{
        width:100px;
        height: 100px;
        line-height: 98px;
        border: 1px solid #eeeeee;
        margin: 0 10px 20px;
        text-align: center;
        font-size: 30px;
        float: left;
        color: #aaaaaa;
    }
    .upload-img-list li:first-child{
        position: relative;
    }
    .upload-img-list li:first-child:before{
        content:'+';
    }
    .upload-img-list li input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .upload-img-list li:not(:first-child){
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .add-prize-footer{
        width:100%;
        .page-num{
            
            display:inline-block;
        }
    }
   .require-item:after{
        content:'*';
        color:#f00;
        position: relative;
        top:-5px;
    }
}

</style>
